<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/9
  Time: 12:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改手机号</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            background: transparent;
        }
    </style>
</head>
<body ontouchstart="">

<div class="iframeBlock of bcf w100 h100">
    <div class="logintittle of tc jz pr">
        修改手机号 <span class="pa cursor" id="close-x">&times;</span>
    </div>
    <div class="of jz" style="width: 90%;">
        <input type="text" name="" id="tel" placeholder="原手机号码" class="db br3 jz br3" style="margin-top: 30px;"/>
        <p class="mgl10 cred f14"></p>
        <input type="text" name="" id="telNew" placeholder="新手机号码" class="db br3 jz br3"/>
        <p class="mgl10 cred f14"></p>
        <div class="clearfix of">
            <input type="text" name="" id="telVerificationCode" placeholder="短信验证码" class="db br3 fl"
                   style="width: 42%;"/>
            <button type="button" id="VerificationCodeBtn" onclick="settime($('#tel'))"
                    class="cursor tc cf fr db f15">获取验证码
            </button>
        </div>
        <p class="mgl10 cred f14"></p>
        <div class="clearfix of" style="margin-top: 46px;">
            <button type="button" id="loginSub" class="cursor tc cf w100 db" onclick="javascript:Sub();">修&nbsp;改
            </button>
        </div>
    </div>
</div>

<script>

    $(window).on("load", function () {
        $("#modifyMoblieBtn", parent.document).click(function () {
            $("#modifyMoblieIframeDiv", parent.document).slideDown();
            $(".theme-popover-mask", parent.document).fadeIn();

        })
        $("#close-x").click(function () {
            $("#modifyMoblieIframeDiv", parent.document).slideUp();
            $(".theme-popover-mask", parent.document).fadeOut();

        })

    });

    //倒计时
    var countdown = 60;
    function resetCode() {
        var btn = $('#VerificationCodeBtn');

        console.log('倒计时');
        if (countdown == 0) {
            btn.removeAttr("disabled");
            btn.text("重新获取验证码");
            btn.css('background', '#0066ff');
            countdown = 60;
            return;

        } else {
            btn.attr("disabled", "disabled");
            btn.text(countdown + "s内填写");
            btn.css('background', '#ccc');
            countdown--;
        }
        setTimeout(function () {
            resetCode(btn);
        }, 1000);
    }

    //发送验证码
    function smsSend(tel) {
        var phone = $.trim(tel);
        $.ajax({
            url: "LoginServlet ",
            data: JSON.stringify({m: 30, mobile: phone}),
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
                console.log(data);
                if (data.state == 1) {
                    showToast('验证码发送成功,请注意查收!');
                    resetCode(); //倒计时
                } else {
                    showToast(data.info);
                }
            },
            error: function () {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }
    var pattern = /^1[0-9]{10}$/;

    //验证手机号码
    function checkPhone(tel) {
        var phone = $.trim(tel);
        console.log(phone);
        isPhone = 1;
        if (phone == '') {
            $('#tel').next('p').text('你还未填写联系电话');
            isPhone = 0;
            return false;
        }
        if (!pattern.test(phone)) {
            $('#tel').next('p').text('手机号填写的格式不对，请正确填写');
            isPhone = 0;
            return false;
        }
        if (pattern.test(phone)) {
            return true;
        }

    }

    /*获取验证码*/
    var isPhone = 1;
    function settime(tel) {
        var phone = tel.val();
        if (checkPhone(phone)) {
            smsSend(phone);
        } else {
            tel.focus();
        }
    }

    function Sub() {
        var tel = $.trim($('#tel').val());
        var telNew = $.trim($('#telNew').val());
        var telVerificationCode = $.trim($('#telVerificationCode').val());

        if (tel == "") {
            $('#tel').next('p').text('你还未填写联系电话');
            return false;
        } else if (!pattern.test(tel)) {
            $('#tel').next('p').text('手机号填写的格式不对，请正确填写');
            return false;
        } else {
            $('#tel').next('p').text(' ');
        }

        if (telNew == "") {
            $('#telNew').next('p').text('你还未填写联系电话');
            return false;
        } else if (!pattern.test(telNew)) {
            $('#telNew').next('p').text('手机号填写的格式不对，请正确填写');
            return false;
        } else {
            $('#telNew').next('p').text(' ');
        }

        if (telVerificationCode == "") {
            $('#telVerificationCode').parent('div').next('p').text('你还未填写手机验证码');
            return false;
        }
        if (!(telVerificationCode == "")) {
            $('#telVerificationCode').parent('div').next('p').text(' ');
        }

        $.ajax({
            url: "LoginServlet ",
            data: JSON.stringify({m: 21, code: telVerificationCode, oldmobile: tel, newmobile: telNew}),
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
                console.log(data);
                if (data.state == 1) {
                    showToast("修改成功！");

                    parent.window.location.reload();

                    setTimeout(function () {
                        $("#loadingfDiv").fadeOut();
                        $("#close-x").trigger('click');
                    }, 500);
                } else {
                    showToast(data.info);
                }
            },
            error: function (data) {
                showToast(data.info);
                return false;
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }

</script>
</body>
</html>
